<template>
	<view style="background-color: #F9F9F9;" v-if="goods">
		<!-- 顶部图片 -->
		<view>
			<image mode="aspectFill"
				:src="goods.photoDes" style="width: 100%;"></image>
			<view class="u-p-30 cflex-c" style="background-color: #FFFFFF;">
				<text style="font-weight: bold;font-size: 34rpx;">{{goods.name}}</text>
				<view class="cflex-r" style="align-items: center;">
					<text style="font-size: 40rpx;color: #FF5400;">￥</text>
					<text class="u-p-t-20 u-p-b-20"
						style="font-weight: bold;color: #FF5400;font-size: 50rpx;">{{goods.disPrice}}</text>
				</view>
				<view class="cflex-r" style="align-items: center;">
					<image src="../../static/qieTu/shijian.png" style="width: 25rpx;height: 25rpx;"></image>
					<text style="font-weight: 500;font-size: 25rpx;margin-left: 5rpx;">{{goods.timeSpan}}分钟</text>
					<view style="font-weight: 500;font-size: 25rpx;">
						<text class="u-m-l-40">90天已售</text>
						<text style="color: #FF5000;margin: 0 12rpx;">{{goods.xiaoLiang}}</text>
						<text>单</text>
					</view>
				</view>
				<view class="bzText">
					<text style="font-weight: bold;font-size: 28rpx;color: #333333;">保障</text>
					<text>未服务全额退</text>
					<text>爽约包赔</text>
					<text>全场保障</text>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="cflex-c" style="background-color: #FFFFFF;margin-top: 20rpx;padding-bottom: 140rpx;">
			<!-- 顶部选项卡 -->
			<view class="cflex-r u-p-t-40 u-p-b-30"
				style="justify-content: space-around;align-items: center; height: 58rpx;">
				<view @click="tabClick(index)" v-for="(item,index) in tabList" :key="index" class="cflex-c"
					style="justify-content: center; align-items: center;">
					<view style="font-weight: bold;">{{item.text}}</view>
					<view :style="{opacity:item.isSelect?1:0}" class="u-m-t-8"
						style="width: 60rpx;height: 8rpx; background-color: #2869FE;"></view>
				</view>
			</view>
			<!-- 具体内容 -->
			<view class="cflex-c u-p-20" style="color: #5D5D5D;font-size: 24rpx;">
				<!-- <view  style="line-height: 40rpx;">{{tabContentList[current]}}</view> -->
				<view style="line-height: 40rpx;">
					<u-parse :html="tabContentList[current]"></u-parse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsid:"",
				jishiId:'',
				zuiZao:'',//最早可约
				goods:{},//项目介绍
				tabList: [{
						text: '项目介绍',
						isSelect: true
					},
					{
						text: '下单须知',
						isSelect: false
					},
					{
						text: '禁忌说明',
						isSelect: false
					},
				],
				tabContentList: [],
				current: 0,
			}
		},
		onShow() {
			this.goods={};
			this.httpRequest();
			console.log("show")
		},
		onLoad({id}) {
			console.log(id);
			this.goodsid = id;
		},
		computed: {
			
		},
		methods: {
			tabClick(index) {
				this.tabList[this.current].isSelect = false;
				this.tabList[index].isSelect = true;
				this.current = index;
			},
			httpRequest(){
				console.log(this.goodsid);
				this.$request("worker/item/itemDetail",{id:this.goodsid}).then(res=>{
					console.log("详情=====>",res);
					this.goods=res.data;
					this.tabContentList[0]=this.goods.jieShao;
					this.tabContentList[1]=this.goods.xuZhi;
					this.tabContentList[2]=this.goods.jinJi;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bzText {
		margin-top: 20rpx;

		>text {
			margin-right: 40rpx;
			color: #A5A5A5;
			font-size: 25rpx;
		}
	}
</style>
